*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

$sidePad: 20px;
$numPerLine: 4;
$elM:4px;
$elW: (100% - $elMrg * $numofPerLine * 2) / $numofPerLine;

.workList {
  width: 100%;
  min-height: 20vh;
  max-height: 100vh;
  padding : $sidePad;

  display: flex;
  flex-flow: row wrap;

  .work{
    width: $elW;
    height: 20vh;
    margin: $elM;
    background-color: #ddd;
  }
}

// .el {
//   $elW       : (100% - $elMrg * $numofPerLine * 2) / $numofPerLine;
//   $elMrgRel  : percentage($elMrg / $elW);

//   margin     : $elMrg;
//   width      : $elW;
//   height     : 20vh;
//   background : #252525;
//   // transition : transform $moveAT $expandAT, width $expandAT, opacity $moveAT $expandAT, z-index 0s $moveAT + $expandAT;
//   will-change: transform, width, opacity;

//   &:not(.s--active) {
//     cursor: pointer;
//   }

//   &__overflow {
//     overflow: hidden;
//     position: relative;
//     height  : 100%;
//   }

//   &__inner {
//     overflow  : hidden;
//     position  : relative;
//     height    : 100%;
//     transition: transform $initAT;

//     @include contInactive {
//       //transform: translate3d(0, 100%, 0);
//     }
//   }

//   &__bg {
//     position   : relative;
//     width      : calc(100vw - #{$sidePad * 2});
//     height     : 100%;
//     transition : transform $moveAT $expandAT;
//     will-change: transform;

//     &:before {
//       content            : "";
//       position           : absolute;
//       left               : 0;
//       top                : -5%;
//       width              : 100%;
//       height             : 110%;
//       background-size    : cover;
//       background-position: center center;
//       transition         : transform $initAT;
//       transform          : translate3d(0, 0, 0) scale(1);

//       @include contInactive {
//         transform: translate3d(0, -100%, 0) scale(1.2);
//       }

//       @include elActive {
//         transition: transform $bgScaleAT;
//       }
//     }

//     &:after {
//       $opacityAT: 0.5s;

//       content   : "";
//       z-index   : 1;
//       position  : absolute;
//       left      : 0;
//       top       : 0;
//       width     : 100%;
//       height    : 100%;
//       background: rgba(0, 0, 0, 0.3);
//       opacity   : 0;
//       transition: opacity $opacityAT;

//       @include contElActive {
//         transition: opacity $opacityAT $fullExpandAT;
//         opacity   : 1 !important;
//       }
//     }
//   }

//   &__preview-cont {
//     z-index        : 2;
//     display        : flex;
//     justify-content: center;
//     align-items    : center;
//     position       : absolute;
//     left           : 0;
//     top            : 0;
//     width          : 100%;
//     height         : 100%;
//     transition     : all 0.3s $fullInitAT - 0.2s;

//     @include contInactive {
//       opacity  : 0;
//       transform: translateY(10px);
//     }

//     @include contElActive {
//       opacity   : 0;
//       transform : translateY(30px);
//       transition: all 0.5s;
//     }
//   }

//   &__heading {
//     color         : #fff;
//     text-transform: uppercase;
//     font-size     : 18px;
//   }

//   &__content {
//     z-index       : -1;
//     position      : absolute;
//     left          : 0;
//     top           : 0;
//     width         : 100%;
//     height        : 100%;
//     padding       : 30px;
//     opacity       : 0;
//     pointer-events: none;
//     transition    : all 0.1s;

//     @include elActive {
//       z-index       : 2;
//       opacity       : 1;
//       pointer-events: auto;
//       transition    : all $contentFadeinAT $fullExpandAT;
//     }
//   }

//   &__text {
//     text-transform: uppercase;
//     font-size     : 40px;
//     color         : #fff;
//   }

//   &__close-btn {

//     z-index       : -1;
//     position      : absolute;
//     right         : 10px;
//     top           : 10px;
//     width         : 60px;
//     height        : 60px;
//     opacity       : 0;
//     pointer-events: none;
//     transition    : all 0s $closeBtnAT + $closeBtnLineDelay;
//     cursor        : pointer;

//     @include elActive {
//       z-index       : 5;
//       opacity       : 1;
//       pointer-events: auto;
//       transition    : all 0s $fullExpandAT;
//     }

//     &:before,
//     &:after {
//       content   : "";
//       position  : absolute;
//       left      : 0;
//       top       : 50%;
//       width     : 100%;
//       height    : 8px;
//       margin-top: -4px;
//       background: #fff;
//       opacity   : 0;
//       transition: opacity 0s;

//       @include elActive {
//         opacity: 1;
//       }
//     }

//     &:before {
//       transform: rotate(45deg) translateX(100%);

//       @include elActive {
//         transition: all $closeBtnAT $fullExpandAT cubic-bezier(.72, .09, .32, 1.57);
//         transform : rotate(45deg) translateX(0);
//       }
//     }

//     &:after {
//       transform: rotate(-45deg) translateX(100%);

//       @include elActive {
//         transition: all $closeBtnAT $fullExpandAT + $closeBtnLineDelay cubic-bezier(.72, .09, .32, 1.57);
//         transform : rotate(-45deg) translateX(0);
//       }
//     }
//   }

//   &__index {
//     overflow   : hidden;
//     position   : absolute;
//     left       : 0;
//     bottom     : $vertPad * -1;
//     width      : 100%;
//     height     : 100%;
//     min-height : 250px;
//     text-align : center;
//     font-size  : 100vw / $numOfEls;
//     line-height: 0.85;
//     font-weight: bold;
//     transition : transform $indexHoverAT, opacity $moveAT/2 $expandAT + $expandDelay + $moveAT;
//     transform  : translate3d(0, 1vw, 0);

//     @include elHover {
//       transform: translate3d(0, 0, 0);
//     }

//     @include contElActive {
//       transition: transform $indexHoverAT, opacity $moveAT/2;
//       opacity   : 0;
//     }

//     &-back,
//     &-front {
//       position: absolute;
//       left    : 0;
//       bottom  : 0;
//       width   : 100%;
//     }

//     &-back {
//       color     : #2f3840;
//       opacity   : 0;
//       transition: opacity $indexHoverAT/2 $indexHoverAT/2;

//       @include elHover {
//         transition: opacity $indexHoverAT/2;
//         opacity   : 1;
//       }
//     }

//     &-overlay {
//       overflow  : hidden;
//       position  : relative;
//       transform : translate3d(0, 100%, 0);
//       transition: transform $indexHoverAT 0.1s;
//       color     : transparent;

//       &:before {
//         content   : attr(data-index);
//         position  : absolute;
//         left      : 0;
//         bottom    : 0;
//         width     : 100%;
//         height    : 100%;
//         color     : #fff;
//         transform : translate3d(0, -100%, 0);
//         transition: transform $indexHoverAT 0.1s;
//       }

//       @include elHover {
//         transform: translate3d(0, 0, 0);

//         &:before {
//           transform: translate3d(0, 0, 0);
//         }
//       }
//     }
//   }

//   @for $i from 0 to $numOfEls {
//     &:nth-child(#{$i + 1}) {
//       .el__bg {
//         // transform: translate3d($elW * $i * -1,0,0);

//         &:before {
//           // transition-delay: 0.1s * $i;
//           background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-#{$i+1}.jpg');
//         }
//       }
//     }
//   }

//   &:hover {

//     .el__bg:after {
//       opacity: 0;
//     }
//   }

//   &.s--active {
//     z-index   : 1;
//     width     : 100%;
//     transform : translate3d(0, 0, 0);
//     transition: transform $moveAT, width $expandAT $moveAT + $expandDelay, z-index 0s;

//     .el__bg {
//       transform : translate3d(0, 0, 0);
//       transition: transform $moveAT;

//       &:before {
//         transition-delay: $moveAT;
//         transform       : scale(1.1);
//       }
//     }
//   }
// }

// .icon-link {
//   position: absolute;
//   left    : 5px;
//   bottom  : 5px;
//   width   : 32px;

//   img {
//     width         : 100%;
//     vertical-align: top;
//   }

//   &--twitter {
//     left : auto;
//     right: 5px;
//   }
// }